<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>商家订单</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .content-container .tab-menu {
            padding: 0px 20px;
            background: #F5F7FA;
            border-bottom: solid 1px #e6e6e6;
        }

        .content-container .tab-menu .tab-menu-ul {
            height: 40px;
            margin-top: 5px;
            background: #FFFFFF;
            border-top: 1px solid #DCDFE6;
            border-left: 1px solid #DCDFE6;
            border-right: 1px solid #DCDFE6;
            display: inline-block;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            float: left;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li {
            position: relative;
            display: inline-block;
            line-height: 40px;
            padding: 0px 24px;
            font-size: 14px;
            color: #303133;
            letter-spacing: 0;
            font-weight: bold;
            list-style: none;
            cursor: pointer;
            float: left;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li .el-icon-close {
            position: absolute;
            top: 5px;
            right: 5px;
            display: none;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li:hover .el-icon-close {
            display: inline-block;
            color: gray;
        }

        .content-container .tab-menu .tab-menu-ul .active {
            border-bottom: 1px solid #ffffff;
            color: #1989FA;
        }

        .content-container .tab-menu .tab-menu-ul .active .el-icon-close {
            color: #1989FA;
            display: inline-block;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li:not(:first-child) {
            border-left: 1px solid #DCDFE6;
        }

        .content-container .tab-menu .title {
            font-size: 22px;
            color: #000000;
            line-height: 22px;
            margin-right: 20px;
        }

        .content-container .operation-menu {
            border-bottom: 1px solid #DCDFE6;
        }

        .el-dropdown-menu {
            width: 200px;
        }
        .content-container .content-nav {
            background: #F5F7FA;
            height: 15px;
        }

        .content-container .operation-menu>div:not(:last-child) {
            border-bottom: 1px solid #DCDFE6;
        }

        .content-container .operation-menu .operation-menu__button {
            padding: 10px 20px;
        }

        .content-container .operation-menu .operation-menu__search {
            padding: 10px 20px 0px 20px;
        }

        .content-container .operation-menu .operation-menu__search .search-condition .search-item {
            float: left;
            display: inline-block;
            margin: 0px 20px 10px 0px;
        }

        .content-container .operation-menu .operation-menu__search .search-condition .search-item .label {
            font-size: 14px;
            color: #000000;
            letter-spacing: 0;
            line-height: 16px;
            margin-right: 10px;
            vertical-align: middle;
        }

        .content-container .operation-menu .operation-menu__search .search-condition .search-item .search-input {
            display: inline-block;
        }

        .content-container .operation-menu .operation-menu__search .search-condition .search-item .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 150px;
        }

        .content-container .muti-table {
            background: #FFFFFF;
        }

        .content-container .muti-table .table-row {
            padding-left: 20px;
            border-bottom: solid 1px #e6e6e6;
            word-break: break-all;
        }

        .content-container .muti-table .table-row .muti-table__table-cell {
            padding: 0px 10px;
            box-sizing: border-box;
        }

        .content-container .muti-table .table-row__sep {
            padding: 8px 0px;
        }

        .content-container .muti-table .table-row__left .muti-table__table-cell {
            line-height: 100%
        }

        .content-container .muti-table .table-th {
            font-size: 14px;
            color: #909399;
            letter-spacing: 0;
            text-align: left;
            line-height: 16px;
            font-weight: bold;
            padding: 0px 0px 0px 20px;
        }

        .content-container .muti-table .content-row {
            font-size: 14px;
            color: #606266;
            letter-spacing: 0;
            text-align: left;
            line-height: 14px;
        }

        .content-container .muti-table .content-row:hover {
            background: #eeeeee;
        }

        .content-container .muti-table .table-row__left {
            min-width: 380px;
            width: 25%
        }

        .content-container .muti-table .table-row .user-id-cell {
            width: 50px;
            padding-left: 0px;
        }

        .content-container .muti-table .table-row .user-name-cell {
            width: 50px;
        }

        .content-container .muti-table .table-row .user-phone-cell {
            min-width: 80px;
        }

        .content-container .muti-table .table-row .user-consum-cell {
            width: 100px
        }

        .content-container .muti-table .table-row .user-operator-cell {
            width: 100px;
            text-align: center;
        }

        .content-container .muti-table .table-row .user-operator-cell .el-button+.el-button {
            margin-top: 5px;
            margin-left: 0px
        }

        .content-container .muti-table .table-row .table-row__right {
            width: 460px;
        }

        .content-container .muti-table .table-row .order-desc-cell {
            min-width: 300px;
            line-height: normal;
        }
        
        .content-container .muti-table .table-row .order-desc-cell .activity-detail {
           width: 100%;
            text-align: left;
        }

        .content-container .muti-table .table-row .order-desc-cell .status-bar {
            width: 100%;
            text-align: left;
            margin-top: 10px;
            height: 22px
            
        }
        
        .content-container .muti-table .table-row .order-desc-cell .status-bar .el-button {
           padding:0px 5px;
           display: none;
        }

        .content-container .muti-table .table-row .experience-cell {
            width: 150px
        }

        .content-container .muti-table .table-row .experience-cell .el-date-editor {
            width: 16px;
            padding: 0px;
            display: none;
        }

        .content-container .muti-table .table-row .experience-cell .el-input__prefix {
            color: #409EFF;
        }

        .content-container .muti-table .table-row .experience-cell .el-date-editor .el-input__inner {
            border: none;
            background: rgba(255,255,255,0);
        }

        .experience-cell .el-date-editor .el-input__inner {
            padding: 0px 20px
        }

        .content-container .muti-table .table-row .legal-cell {
            width: 50px;
        }


        .content-container .muti-table .table-row .el-icon-edit {
            color: rgb(64, 158, 255);
            margin-left: 2px;
            display: none;
        }

        .content-container .muti-table .table-row .table-row__sep>div:hover .el-icon-edit {
            display: block;
        }
        
        .content-container .muti-table .table-row .table-row__sep>div:hover .status-bar .el-button{
            display: inline-block;
        }
        .content-container .muti-table .table-row .table-row__sep>div:hover .experience-cell .el-date-editor {
            display: block;
        }

        .content-container .muti-table .table-row .order-status-cell {
            width: 80px;
        }

        .content-container .muti-table .table-row .order-operator-cell {
            width: 180px;
        }
        .content-container .muti-table .table-row .order-operator-cell .button-section {
            width: 100%;
            text-align: left;
        }
        .content-container .muti-table .table-row .order-operator-cell .button-section + .button-section {
            margin-top: 10px
        }
        .content-container .muti-table .table-row .order-operator-cell .button-section .el-button--mini, .el-button--mini.is-round {
            padding: 7px 10px;
        }

        .pageination-container {
            width: 100%;
            text-align: right;
            box-sizing: border-box;
            padding-right: 20px;
            margin-top: 20px;
        }

        .consume-dialog {
            min-width: 780px;
        }

        .consume-dialog .consume-form-column {
            width: 50%;
        }

        .consume-dialog .consume-form-column .el-select {
            width: 100%;
        }
        
        .el-date-editor.el-input,.el-select {
            width: 100%
        }
        
        .pop-menu .el-button {
            display: block;
            margin-left: 0px;
            font-size: 14px;
            color: #5A5E66;
            letter-spacing: 0;
            line-height: 14px;
        }
        
        .dialog-footer {
            text-align: right;        
        }
        
        .logist-dialog-body {
            margin-top: -20px;
            border-bottom: 1px solid #e6e6e6;
        }
        
        .logist-dialog-body .name-mobile {
            font-size: 14px;
            color: #606266;
            font-weight: bold;
        }

        .logist-dialog-body .address {
            margin: 10px 0px 20px 0px;
            font-size: 12px;
            color: #909399;
            letter-spacing: 0;
            line-height: 16px;
        }
        
        .logist-form {
            margin-top: 20px;
        }
        
        .legal-container {
            padding: 10px 20px;
            box-sizing: border-box;
        }
        
        .legal-container .title {
            text-align: center;
            font-size: 14px;
            color: #303133;
            letter-spacing: 0;
            line-height: 14px;
        }
        
        .legal-container .radio-contaienr {
            margin: 20px 0px 0px 0px;
        }
        
        .legal-container .radio-contaienr .el-radio{
            display: block;
            margin: 0px;
        }
        .legal-container .reason-container {
            margin-top: 10px;
        }
        
        .legal-container .reason-container .el-form-item__label {
            padding-bottom: 0px;
        }
        
        .legal-container .radio-contaienr .el-radio+.el-radio {
            margin-top: 20px
        }
        
        .legal-container .button-container {
            text-align: center;
            margin-top: 20px;
        }
        
        .detail-dialog-section + .detail-dialog-section {
            margin-top: 20px;
        }
    </style>
</head>

<body style="display: none;">
    <div id="app" class="container" flex>
        <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
            <div class="content-container" flex-box=1 flex="dir:top">
                <div flex-box="0" class="tab-menu" flex="cross:center">
                    <div class="title" flex-box=0>订单列表</div>
                    <div flex-box="1">
                        <ul class="tab-menu-ul">
                            <li class="tab-menu-li active">瑜曼伊人
                                <i class="el-icon-close"></i>
                            </li>
                            <li class="tab-menu-li">金宝贝
                                <i class="el-icon-close"></i>
                            </li>
                            <li class="tab-menu-li">吉健
                                <i class="el-icon-close"></i>
                            </li>
                        </ul>
                    </div>
                    <div flex-box="0" class="opt-area">
                        <el-dropdown size="mini" width="300">
                          <span class="el-dropdown-link">
                            <el-button slot="reference" type="default" icon="el-icon-circle-plus-outline" size="mini" >新增订单列表</el-button>
                          </span>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item disabled>瑜曼伊人</el-dropdown-item>
                            <el-dropdown-item>瑜曼伊人-总店</el-dropdown-item>
                            <el-dropdown-item>瑜曼伊人-白云店</el-dropdown-item>
                            <el-dropdown-item>瑜曼伊人-海珠店</el-dropdown-item>
                            <el-dropdown-item divided disabled>金宝贝</el-dropdown-item>
                            <el-dropdown-item>金宝贝-总店</el-dropdown-item>
                            <el-dropdown-item>金宝贝-白云店</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
                <div flex-box="1">
                    <div class="operation-menu">
                        <div class="operation-menu__button" flex>
                            <div flex-box="1">
                                <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="newFormVisible=true">新建用户订单</el-button>
                            </div>
                            <div flex-box="0">
                                <el-button type="primary" size="small" icon="el-icon-refresh" plain>刷新</el-button>
                                <el-button type="primary" size="small" icon="el-icon-download" plain>导出</el-button>
                            </div>
                        </div>
                        <div class="operation-menu__search" flex="cross:top">
                            <div flex-box="1" class="search-condition">
                                <div class="search-item">
                                    <span class="label">规则筛选</span>
                                    <div class="search-input" style="width: 100px">
                                        <el-select v-model="value" placeholder="请选择" size="small">
                                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </div>
                                <div class="search-item">
                                    <span class="label">用户姓名</span>
                                    <div class="search-input" style="width: 100px">
                                        <el-input v-model="username" placeholder="请输入姓名" size="small"></el-input>
                                    </div>
                                </div>
                                <div class="search-item">
                                    <span class="label">电话号码</span>
                                    <div class="search-input" style="width: 100px">
                                        <el-input v-model="mobile" placeholder="请输入手机号" size="small"></el-input>
                                    </div>
                                </div>
                                <div class="search-item">
                                    <span class="label">订单编号</span>
                                    <div class="search-input" style="width: 100px">
                                        <el-input v-model="orderNo" placeholder="请输入订单号" size="small"></el-input>
                                    </div>
                                </div>
                                <div class="search-item">
                                    <span class="label">到店日期</span>
                                    <div class="search-input" style="width: 100px">
                                        <el-date-picker v-model="enterDate" type="date" placeholder="选择日期" size="small">
                                        </el-date-picker>
                                    </div>
                                </div>
                            </div>
                            <div flex-box="0">
                                <el-button type="primary" size="small">筛选</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="content-nav"></div>
                    <div class="muti-table">
                        <div class="table-th table-row" flex>
                            <div class="table-row__sep table-row__left " style="border-right: solid 1px #e6e6e6;" flex>
                                <div flex-box="0" class="muti-table__table-cell user-id-cell" flex="cross:center">用户ID</div>
                                <div flex-box="0" class="muti-table__table-cell user-name-cell" flex="cross:center">姓名</div>
                                <div flex-box="1" class="muti-table__table-cell user-phone-cell" flex="cross:center">电话号码</div>
                                <div flex-box="0" class="muti-table__table-cell user-consum-cell" flex="cross:center">5月到店消费金额</div>
                                <div flex-box="0" class="muti-table__table-cell user-operator-cell" flex="cross:center">操作</div>
                            </div>
                            <div class="table-row__sep" flex-box="1" flex>
                                <div flex-box="1" flex="cross:center" class="muti-table__table-cell title-grow-table-cell order-desc-cell">活动名称 / 实付金额（元）/ 下单日期</div>
                                <div flex-box="0" flex class="table-row__right">
                                    <div flex-box="0" class="muti-table__table-cell experience-cell" flex="cross:center">到店体验日期</div>
                                    <div flex-box="0" class="muti-table__table-cell legal-cell" flex="cross:center">是否有效用户</div>
                                    <div flex-box="0" class="muti-table__table-cell order-status-cell" flex="cross:center">订单状态</div>
                                    <div flex-box="0" class="muti-table__table-cell order-operator-cell" flex="cross:center">操作</div>
                                </div>

                            </div>
                        </div>

                        <div class="content-row table-row" flex>
                            <div class="table-row__sep table-row__left" flex-box=0 style="border-right: solid 1px #e6e6e6;" flex>
                                <div flex-box="0" class="muti-table__table-cell user-id-cell" flex="cross:center">001</div>
                                <div flex-box="0" class="muti-table__table-cell user-name-cell" flex="cross:center">张三</div>
                                <div flex-box="1" flex="cross:center" class="muti-table__table-cell user-phone-cell">18577282994</div>
                                <div flex-box="0" flex="cross:center" class="muti-table__table-cell user-consum-cell">2000.00</div>
                                <div flex-box="0" flex="cross:center" class="muti-table__table-cell user-operator-cell">
                                    <div>
                                        <el-button type="primary" size="mini" @click="addConsume">录入消费</el-button>
                                        <el-button size="mini" @click="showUserConsume">消费记录</el-button>
                                    </div>

                                </div>
                            </div>
                            <div class="table-row__sep" flex-box="1">
                                <div style="border-bottom: solid 1px #e6e6e6;padding: 10px 0px " flex>
                                    <div flex-box="1" flex="cross:center dir:top" class="muti-table__table-cell grow-table-cell order-desc-cell">
                                       <div class="activity-detail">金贝贝·月嫂 5大直营门店，省心选月嫂平台报名专享超¥2000增值大礼包金贝贝·月嫂 5大直营门店</div>
                                        <div class="status-bar" flex>
                                            <div flex-box="1">￥384 &nbsp;&nbsp;2018/04/06</div>
                                            <div flex-box="0">
                                                 <el-button type="text" @click="detailVisible=true">订单详情</el-button>
                                            </div>
                                        </div>
                                    </div>
                                    <div flex-box="0" flex class="table-row__right">
                                        <div flex-box="0" class="muti-table__table-cell experience-cell" flex="cross:center">2018/05/21
                                            <el-date-picker
                                              v-model="value1"
                                              type="date"
                                              align="right"
                                              placeholder="选择日期">
                                            </el-date-picker>
                                        </div>
                                        <div flex-box="0" class="muti-table__table-cell legal-cell" flex="cross:center">是
                                            <el-popover placement="bottom" width="280" trigger="click">
                                                <div class="legal-container">
                                                   <h5 class="title">是否有效用户？</h5>
                                                   <el-form label-position="top" :model="legalForm">
                                                    <div class="radio-contaienr">
                                                        <el-radio v-model="legalForm.isLegal" label="1">是</el-radio>
                                                         <el-radio v-model="legalForm.isLegal" label="2">否</el-radio>
                                                    </div>
                                                     <div class="reason-container" v-if="legalForm.isLegal==2">
                                                        <el-form-item label="无效原因" :rules="[{required: true, message: '请填写原因'}]">
                                                            <el-input
                                                          type="textarea"
                                                          :autosize="{ minRows: 4, maxRows: 4}"
                                                          placeholder="未选择"
                                                                   v-model="legalForm.reason"></el-input>
                                                          </el-form-item>
                                                     </div>
                                                     </el-form>
                                                     <div class="button-container">
                                                          <el-button round size="mini">取消</el-button>
                                                          <el-button round type="primary" size="mini">保存</el-button>
                                                     </div>
                                                </div>
                                                
                                                <i class="el-icon-edit" slot="reference"></i>
                                            </el-popover>
                                        </div>
                                        <div flex-box="0" class="muti-table__table-cell order-status-cell" flex="cross:center">已到店</div>
                                        <div flex-box="0" class="muti-table__table-cell order-operator-cell" flex="cross:center dir:top">
                                            <div  class="button-section">
                                                <el-button size="mini" @click="logisticsVisible=true">添加物流</el-button>
                                            </div>
                                            <div class="button-section">
                                                <el-button type="default" size="mini"  @click="adjustAccountVisible=true">调账(平台)</el-button>
                                                    <el-button size="mini"  @click="newCrossVisible=true">派单</el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="padding-top: 10px" flex-box=1 flex>
                                    <div flex-box="1" flex="cross:center dir:top" class="muti-table__table-cell grow-table-cell order-desc-cell">
                                         <div class="activity-detail"> 金贝贝·月嫂 5大直营门店，省心选月嫂平台报名专享超¥2000增值大礼包金贝贝·月嫂 5大直营门店，省心选月嫂平台报名专享超¥2000增值大礼包金贝贝·月嫂 5大直营门店，省心选月嫂平台报名专享超¥2000增值大礼包金贝贝·月嫂 5大直营门店，省心选月嫂平台报名专享超¥2000增值大礼包</div>
                                        <div class="status-bar" flex>
                                            <div flex-box="1">￥384 &nbsp;&nbsp;2018/04/06</div>
                                            <div flex-box="0">
                                                 <el-button type="text" @click="detailVisible=true">订单详情</el-button>
                                            </div>
                                        </div>
                                    </div>
                                    <div flex-box="0" flex class="table-row__right">
                                        <div flex-box="0" class="muti-table__table-cell experience-cell" flex="cross:center">2018/05/21
                                            <el-date-picker
                                              v-model="value2"
                                              type="date"
                                              align="right"
                                              placeholder="选择日期">
                                            </el-date-picker>
                                        </div>
                                        <div flex-box="0" class="muti-table__table-cell legal-cell" flex="cross:center">是
                                            <el-popover placement="bottom" width="280" trigger="click">
                                                <div class="legal-container">
                                                   <h5 class="title">是否有效用户？</h5>
                                                   <el-form label-position="top" :model="legalForm">
                                                    <div class="radio-contaienr">
                                                        <el-radio v-model="legalForm.isLegal" label="1">是</el-radio>
                                                         <el-radio v-model="legalForm.isLegal" label="2">否</el-radio>
                                                    </div>
                                                     <div class="reason-container" v-if="legalForm.isLegal==2">
                                                        <el-form-item label="无效原因" :rules="[{required: true, message: '请填写原因'}]">
                                                            <el-input
                                                          type="textarea"
                                                          :autosize="{ minRows: 4, maxRows: 4}"
                                                          placeholder="未选择"
                                                                   v-model="legalForm.reason"></el-input>
                                                          </el-form-item>
                                                     </div>
                                                     </el-form>
                                                     <div class="button-container">
                                                          <el-button round size="mini">取消</el-button>
                                                          <el-button round type="primary" size="mini">保存</el-button>
                                                     </div>
                                                </div>
                                                <i class="el-icon-edit" slot="reference"></i>
                                            </el-popover>

                                        </div>
                                        <div flex-box="0" class="muti-table__table-cell order-status-cell" flex="cross:center">已到店</div>
                                        <div flex-box="0" class="muti-table__table-cell order-operator-cell" flex="cross:center dir:top">
                                            <div  class="button-section">
                                                <el-button size="mini" @click="logisticsVisible=true">添加物流</el-button>
                                            </div>
                                            <div class="button-section">
                                                <el-button type="default" size="mini"  @click="adjustAccountVisible=true">调账(平台)</el-button>
                                                    <el-button size="mini"  @click="newCrossVisible=true">派单</el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="content-row table-row" flex>
                            <div class="table-row__sep table-row__left" flex-box=0 style="border-right: solid 1px #e6e6e6;" flex>
                                <div flex-box="0" class="muti-table__table-cell user-id-cell" flex="cross:center">001</div>
                                <div flex-box="0" class="muti-table__table-cell user-name-cell" flex="cross:center">张三</div>
                                <div flex-box="1" flex="cross:center" class="muti-table__table-cell user-phone-cell">18577282994</div>
                                <div flex-box="0" flex="cross:center" class="muti-table__table-cell user-consum-cell">2000.00</div>
                                <div flex-box="0" flex="cross:center" class="muti-table__table-cell user-operator-cell">
                                    <div>
                                        <el-button type="primary" size="mini" @click="addConsume">录入消费</el-button>
                                    </div>

                                </div>
                            </div>
                            <div class="table-row__sep" flex-box="1">
                                <div style="padding: 10px 0px " flex>
                                    <div flex-box="1" flex="cross:center dir:top" class="muti-table__table-cell grow-table-cell order-desc-cell">
                                        <div class="activity-detail">金贝贝·月嫂 5大直营门店，省心选月嫂平台报名专享超¥2000增值大礼包金贝贝·月嫂 5大直营门店</div>
                                        <div class="status-bar" flex>
                                            <div flex-box="1">￥384 &nbsp;&nbsp;2018/04/06</div>
                                            <div flex-box="0">
                                                 <el-button type="text" @click="detailVisible=true">订单详情</el-button>
                                            </div>
                                        </div>
                                    </div>
                                    <div flex-box="0" flex class="table-row__right">
                                        <div flex-box="0" class="muti-table__table-cell experience-cell" flex="cross:center">2018/05/21
                                            <el-date-picker
                                              v-model="value3"
                                              type="date"
                                              align="right"
                                              placeholder="选择日期">
                                            </el-date-picker>
                                        </div>
                                        <div flex-box="0" class="muti-table__table-cell legal-cell" flex="cross:center">是
                                        
                                               <el-popover placement="bottom" width="280" trigger="click">
                                                <div class="legal-container">
                                                   <h5 class="title">是否有效用户？</h5>
                                                   <el-form label-position="top" :model="legalForm">
                                                    <div class="radio-contaienr">
                                                        <el-radio v-model="legalForm.isLegal" label="1">是</el-radio>
                                                         <el-radio v-model="legalForm.isLegal" label="2">否</el-radio>
                                                    </div>
                                                     <div class="reason-container" v-if="legalForm.isLegal==2">
                                                        <el-form-item label="无效原因" :rules="[{required: true, message: '请填写原因'}]">
                                                            <el-input
                                                          type="textarea"
                                                          :autosize="{ minRows: 4, maxRows: 4}"
                                                          placeholder="未选择"
                                                                   v-model="legalForm.reason"></el-input>
                                                          </el-form-item>
                                                     </div>
                                                     </el-form>
                                                     <div class="button-container">
                                                          <el-button round size="mini">取消</el-button>
                                                          <el-button round type="primary" size="mini">保存</el-button>
                                                     </div>
                                                </div>
                                                
                                                <i class="el-icon-edit" slot="reference"></i>
                                            </el-popover>
                                            
                                        </div>
                                        <div flex-box="0" class="muti-table__table-cell order-status-cell" flex="cross:center">已到店</div>
                                        <div flex-box="0" class="muti-table__table-cell order-operator-cell" flex="cross:center dir:top">
                                            <div  class="button-section">
                                                <el-button size="mini" @click="logisticsVisible=true">添加物流</el-button>
                                            </div>
                                            <div class="button-section">
                                                <el-button type="default" size="mini"  @click="adjustAccountVisible=true">调账(平台)</el-button>
                                                    <el-button size="mini"  @click="newCrossVisible=true">派单</el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="pageination-container">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-admin-menu>

        <!-- 录入消费窗口 -->
        <el-dialog title="录入消费" :visible.sync="dialogFormVisible" width="70%" custom-class="consume-dialog">
            <el-form :model="form" :rules="consumeRules">
                <div flex>
                    <div class="consume-form-column">
                        <el-form-item label="关联的平台订单" :label-width="formLabelWidth">
                            <el-select v-model="form.orderNo" placeholder="未选择" width="100%">
                                <el-option label="20180410210220227" value="20180410210220227"></el-option>
                                <el-option label="20180410210220228" value="20180410210220228"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="在店消费时间" :label-width="formLabelWidth" prop="time">
                            <el-select v-model="form.time" placeholder="未选择" width="100%">
                                <el-option label="201804102" value="201804102"></el-option>
                                <el-option label="201804103" value="201804103"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="消费实付金额" :label-width="formLabelWidth" prop="price">
                            <el-input v-model="form.price"></el-input>
                        </el-form-item>
                    </div>
                    <div class="consume-form-column">
                        <el-form-item label="消费分类" :label-width="formLabelWidth" prop="consumeType">
                            <el-select v-model="form.consumeType" placeholder="未选择">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="在店消费项目" :label-width="formLabelWidth">
                            <el-select v-model="form.product" placeholder="未选择" width="100%">
                                <el-option label="产品1" value="product1"></el-option>
                                <el-option label="产品2" value="product2"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div>
                    <el-form-item label="是否重复名单" :label-width="formLabelWidth">
                        <el-radio v-model="form.isRepeat" label="1">是</el-radio>
                        <el-radio v-model="form.isRepeat" label="0">否</el-radio>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="上传凭证" :label-width="formLabelWidth" prop="Certificate">
                        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :file-list="form.fileList2" list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="form.note"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
            </div>
        </el-dialog>

        <!-- 消费记录 -->
        <el-dialog title="消费记录" :visible.sync="userConsumeVisible" width="70%" custom-class="consume-dialog">
            <div style="margin-top: -40px">
                <el-section-pannel title="线下转化列表">
                    <div slot="content">
                        <el-table :data="transformData" style="width: 100%">
                            <el-table-column prop='insertDate' label="录入日期"></el-table-column>
                            <el-table-column prop='orderNo' label="订单编号"></el-table-column>
                            <el-table-column prop='orderRelated' label="关联订单"></el-table-column>
                            <el-table-column prop='consumeDate' label="到店消费时间"></el-table-column>
                            <el-table-column prop='consumeType' label="消费分类"></el-table-column>
                            <el-table-column prop='consumeProduct' label="到店消费项目"></el-table-column>
                            <el-table-column prop='consumePrice' label="消费实付金额"></el-table-column>
                            <el-table-column prop='isRepeat' label="是否重复名单"></el-table-column>
                            <el-table-column prop='operator' label="操作" width=100>
                                <template slot-scope="scope">
                                    <el-button size="small">修改</el-button>
                                  </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-section-pannel>
                <div style="margin-top: 20px">
                    <el-section-pannel title="凭证展示">
                        <div slot="content">
                            <el-table :data="auditData" style="width: 100%">
                                <el-table-column prop='orderNo' label="订单编号" width="150"></el-table-column>
                                <el-table-column label="凭证" width="400">
                                    <template slot-scope="scope">
                                        <img :src="scope.row.auditUrl" style="max-width: 360px" alt="">
                                    </template>
                                </el-table-column>
                                <el-table-column prop='rem' label="备注"></el-table-column>
                            </el-table>
                        </div>
                    </el-section-pannel>
                </div>
            </div>
        </el-dialog>
        
        <!-- 新建用户订单 -->
        <el-dialog title="新建用户订单" width="356px" :visible.sync="newFormVisible">
            <el-form :model="newForm">
                <el-form-item label="用户姓名" :label-width="newLabelWidth">
                    <el-input v-model="newForm.userName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" :label-width="newLabelWidth">
                    <el-input v-model="newForm.phone" size="small"></el-input>
                </el-form-item>
                <el-form-item label="消费时间" :label-width="newLabelWidth">
                    <el-date-picker v-model="newForm.consumeTime" type="date" placeholder="选择日期" size="small" width="100%"></el-date-picker>
                </el-form-item>
                <el-form-item label="消费分类" :label-width="newLabelWidth">
                            <el-select size="small" v-model="newForm.productType" placeholder="未选择">
                                <el-option label="月子会所" value="product1"></el-option>
                                <el-option label="体检" value="product2"></el-option>
                            </el-select>
                        </el-form-item>
                 <el-form-item label="消费项目" :label-width="newLabelWidth">
                    <el-input v-model="newForm.product" size="small"></el-input>
                </el-form-item>       
                   <el-form-item label="消费金额" :label-width="newLabelWidth">
                    <el-input v-model="newForm.price" size="small"></el-input>
                </el-form-item>      
            </el-form>
               <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="newFormVisible = false" size="small">派单</el-button>
            </div>
        </el-dialog>
         
        <!-- 派单窗口 -->
        <el-dialog title="派单" :visible.sync="newCrossVisible" width="730px">
            <el-form :model="newCrossForm">
               <div style="margin-top: -40px">
                <el-section-pannel title="当前订单">
                   <div slot="content" class="custom-content">
                         <div flex="main:justify">
                         <div style="width: 49%">
                             <el-form-item label="订单编号" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.orderNo" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="下单日期" :label-width="newCrossLabelWidth">
                                <el-date-picker v-model="newCrossForm.consumeTime" type="date" placeholder="选择日期" size="small" width="100%"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="活动名称" :label-width="newCrossLabelWidth">
                            <el-select v-model="newForm.activityName" placeholder="未选择">
                                <el-option label="月子会所" value="product1"></el-option>
                                <el-option label="体检" value="product2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目名称" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.productName" size="small"></el-input>
                            </el-form-item>
                         </div>
                         <div style="width: 49%">
                              <el-form-item label="商品单价" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.salePrice" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="购买数量" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.orderNum" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="优惠金额" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.discount" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="实付金额" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.actPrice" size="small"></el-input>
                            </el-form-item>
                         </div>
                         </div>
                   
                   </div>
                </el-section-pannel>
                <el-section-pannel title="其他信息">
                    <div slot="content" class="custom-content">
                        <div flex="main:justify">
                         <div style="width: 49%">
                           <el-form-item label="评论链接" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.commentsUrl" size="small" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="处理人" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.checker" size="small" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.username" size="small" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="电话" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.phone" size="small" disabled></el-input>
                            </el-form-item>
                            </div>
                            <div style="width: 49%">
                            <el-form-item>
                                 <el-button size="small">复制</el-button>
                            </el-form-item>
                           
                            </div>
                        </div>
                        
                    </div>
                </el-section-pannel>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="newCrossVisible = false" size="small">派单</el-button>
                </div>
            </div>
            </el-form>
        </el-dialog> 
        
        <!-- 调账 -->
        <el-dialog title="调账" :visible.sync="adjustAccountVisible" width="80%" custom-class="consume-dialog">
            <div style="margin-top: -30px">
               <el-section-pannel title="此订单当前结算规则">
                <div slot="content" class="custom-content">
                    <el-table :data="adjustData" style="width: 100%">
                        <el-table-column
                            prop="id"
                            label="日期"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="ruleName"
                            label="规则名称"
                            width="150">
                        </el-table-column>
                        <el-table-column
                            prop="effect"
                            label="是否生效"
                            width="60">
                        </el-table-column>
                        <el-table-column
                            prop="effectTime"
                            label="生效时间"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="deadLine"
                            label="失效时间"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="blockName"
                            label="模块名称"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="settlement"
                            label="结算值"
                             width="80"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="gradientStart"
                            label="梯度开始值（单）"
                             width="100"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="gradientEnd"
                            label="梯度结束值（单）"
                             width="100"
                            >
                        </el-table-column>
                    </el-table>
                </div>
            </el-section-pannel>
                <div style="margin-top: 20px">
                    <el-alert
                        title="提醒"
                        type="warning"
                        description="结算规则只能更改为相同格式，如：5%调整为6%，而不能5%调整为100。"
                        :closable='false'
                        show-icon>
                      </el-alert>
                </div>
                <div style="margin-top: 20px">
                    <el-form :model="adjustForm">
                        <el-form-item label="修改估算值" :label-width="adjustLabelWidth">
                            <el-input v-model="adjustForm.value" size="small" style="width:80px"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                
            </div>
            <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="adjustAccountVisible = false" size="small">保存</el-button>
                </div>
        </el-dialog>
        
        <!-- 添加物流 -->
        <el-dialog title="添加物流" :visible.sync="logisticsVisible" width="360px">
            <div class="logist-dialog-body">
                <div class="name-mobile">张三 18577270444</div>
                <div class="address">
                    广东省-广州市-天河区-五山街道金慧街88号自编11栋102号（海汇铭康）
                </div>
            </div>
            <div class="logist-form">
                <el-form :model="logisticsForm">
                    <el-form-item label="快递单号" :label-width="logisticsLabelWidth">
                                <el-input v-model="logisticsForm.expressNum"></el-input>
                            </el-form-item>
                            <el-form-item label="快递公司" :label-width="logisticsLabelWidth">
                                <el-select v-model="logisticsForm.expressComp" placeholder="未选择">
                                    <el-option label="百世快递" value="product1"></el-option>
                                    <el-option label="顺丰快递" value="product2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="发货时间" :label-width="logisticsLabelWidth">
                                <el-date-picker v-model="newCrossForm.sendTime" type="date" placeholder="选择日期" width="100%"></el-date-picker>
                            </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="logisticsVisible = false">提交</el-button>
                </div>
        </el-dialog>  
        
        <!-- 添加物流 -->
        <el-dialog title="订单详情" :visible.sync="detailVisible" width="80%" custom-class="consume-dialog">
            <div style="margin-top: -30px">
               <div class="detail-dialog-section">
                <el-section-pannel title="订单信息">
                    <div slot="content" class="custom-content">
                        <el-table :data="detailData" style="width: 100%">
                            <el-table-column
                                prop="orderNo"
                                label="订单编号"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="orderTime"
                                label="下单日期"
                                width="120">
                            </el-table-column>
                            <el-table-column
                                prop="activityName"
                                label="活动名称">
                            </el-table-column>
                            <el-table-column
                                prop="productName"
                                label="项目名称">
                            </el-table-column>
                            <el-table-column
                                prop="sale"
                                label="商品单价"
                                width="120">
                            </el-table-column>
                            <el-table-column
                                prop="orderNum"
                                label="购买数量"
                                width="60">
                            </el-table-column>
                            <el-table-column
                                prop="discount"
                                label="优惠金额"
                                width="120">
                            </el-table-column>
                            <el-table-column
                                prop="actPrice"
                                label="实付金额"
                                width="120">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-section-pannel>
                </div>
                <div class="detail-dialog-section">
                <el-section-pannel title="是否有效用户">
                   <div slot="content" class="custom-content">
                    <el-table :data="isLegalData" width="100%">
                        <el-table-column
                                prop="isLegal"
                                label="是否有效"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="reason"
                                label="原因">
                            </el-table-column>
                            
                    </el-table>
                    </div>
                    
                </el-section-pannel>
                </div>
                <div class="detail-dialog-section">
                        <el-section-pannel title="其他信息">
                            <div slot="content" class="custom-content" style="width: 600px">
                            <el-form :model="detailForm">
                                
                            
                        <div flex="main:justify">
                         <div style="width: 49%">
                           <el-form-item label="评论链接" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.commentsUrl" size="small" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="处理人" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.checker" size="small" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.username" size="small" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="电话" :label-width="newCrossLabelWidth">
                                <el-input v-model="newCrossForm.phone" size="small" disabled></el-input>
                            </el-form-item>
                            </div>
                            <div style="width: 49%">
                            <el-form-item>
                                 <el-button size="small">复制</el-button>
                            </el-form-item>
                           
                            </div>
                        </div>
                        </el-form>
                        
                    </div>
                        </el-section-pannel>
                    </div>
            </div>
        </el-dialog>  
    </div>
</body>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.comon.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false,
                activeName2: 'first',
                value1:'',
                value2:'',
                value3:'',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                username: '',
                mobile: '',
                orderNo: '',
                enterDate: '',
                tableData6: [],
                currentPage4: 4,
                // 来自test_data.js
                menus: menus,
                // 来自test_data.js
                userDetail: userDetail,
                // 录入消费弹出框表单
                dialogFormVisible: false,
                form: {
                    orderNo: '',
                    consumeType: '',
                    time: '',
                    product: '',
                    price: '',
                    isRepeat: '0',
                    note: '',
                    fileList2: []
                },
                consumeRules: {
                    consumeType: [{
                        required: true,
                        message: '请选择消费类型',
                        trigger: 'blur'
                    }],
                    time: [{
                        required: true,
                        message: '请选择消费时间',
                        trigger: 'blur'
                    }],
                    price: [{
                        required: true,
                        message: '请填写金额信息',
                        trigger: 'blur'
                    }],
                    Certificate: [{
                        required: true,
                        message: '请填写金额信息',
                        trigger: 'blur'
                    }]
                },
                // 消费记录
                userConsumeVisible: false,
                transformData: [{
                    insertDate: '2018/05/21',
                    orderNo: '1',
                    orderRelated: '',
                    consumeDate: '2018/05/21',
                    consumeType: '',
                    consumeProduct: '',
                    consumePrice: '2000.00',
                    isRepeat: '是'
                }, {
                    insertDate: '2018/05/21',
                    orderNo: '2',
                    orderRelated: '',
                    consumeDate: '2018/05/21',
                    consumeType: '',
                    consumeProduct: '',
                    consumePrice: '2000.00',
                    isRepeat: '否'
                }],
                auditData: [{
                    orderNo: '1',
                    auditUrl: 'http://file.ihealthcoming.com/avatar.png',
                    rem: '这里是备注内容，这里是备注内容。'
                }],
                formLabelWidth: '120px',
                // 新建用户订单
                newLabelWidth: '70px',
                newFormVisible: false,
                newForm: {
                    userName:'',
                    phone:'',
                    consumeTime:'',
                    productType:'product1',
                    product:'',
                    price:''
                },
                // 派单
                newCrossVisible:false,
                newCrossLabelWidth:'70px',
                newCrossForm:{
                    orderNo:'2912899138919',
                    salePrice:'2000.00',
                    consumeTime:'',
                    orderNum:'',
                    activityName:'',
                    discount:'',
                    productName:'',
                    actPrice:'',
                    commentsUrl:'www.google.cn',
                    checker:'张三',
                    username:'李四',
                    phone:'18577270452'
                },
                // 调账窗口
                adjustAccountVisible:false,
                adjustLabelWidth:'100px',
                adjustData:[{
                    id:'001',
                    ruleName:'金宝贝合同1',
                    effect:'是',
                    effectTime:'2018/06/01',
                    deadLine:'2018/06/01',
                    blockName:'固定比例5%',
                    settlement:'5%',
                    gradientStart:'-',
                    gradientEnd:'-'
                }],
                adjustForm:{
                    value:'8%'
                },
                // 添加物流
                logisticsVisible:false,
                logisticsLabelWidth: '80px',
                logisticsForm: {
                    expressNum:'',
                    expressComp:'',
                    sendTime:''
                },
                // 是否合法用户
                legalFormVisible:false,
                legalForm:{
                    isLegal:'1',
                    reason:''
                },
                //订单详情
                detailVisible:false,
                detailData:[
                    {
                        orderNo:'001',
                        orderTime:'2018/05/21',
                        activityName:'金贝贝·月嫂  5大直营门店，省心选月嫂平台报名专享超¥200增值大礼包',
                        productName:'金贝贝·月嫂  5大直营门店，省心选月嫂平台报名专享超¥200增值大礼包',
                        sale:'2000.00',
                        orderNum:'1',
                        discount:'200.00',
                        actPrice:'1800.00'
                    }
                ],
                isLegalData:[{
                    isLegal:'否',
                    reason:'金贝贝·月嫂  5大直营门店，省心选月嫂平台报名专享超¥200增值大礼包'
                }],
                detailForm:{
                    commentsUrl:'www.google.cn',
                    checker:'张三',
                    username:'李四',
                    phone:'18577270452'
                }
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            removeTab() {

            },
            handleSizeChange(val) {
                console.log();
            },
            handleCurrentChange(val) {
                console.log();
            },
            logout() {
                window.location.href = 'login.html';
            },
            // 新增订单监听事件
            addConsume() {
                this.dialogFormVisible = true;
            },
            // 消费记录监听事件
            showUserConsume() {
                this.userConsumeVisible = true;
            }
        },
        mounted() {
            document.querySelector('body').style.display = 'block';
        }
    });

</script>

</html>
